﻿@namespace MudBlazor.Docs.Examples

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

<MudGrid>
    <MudItem xs="2" Class="d-flex align-center">
        <MudRadioGroup T="Position" Value="_showLegendPosition" ValueChanged="@((Position value) => ShowLegendPositionChanged(value))" Class="d-flex flex-column align-center justify-center">

            <!-- Top Radio -->
            <MudItem xs="12" Class="d-flex justify-center align-center">
                <MudRadio Color="Color.Primary" Value="Position.Top" LabelPlacement="Placement.Top" Dense>Top</MudRadio>
            </MudItem>

            <MudItem xs="12" Class="d-flex justify-center py-2">
                <MudGrid Class="align-center justify-center">
                    <!-- Left Radio -->
                    <MudItem xs="4" Class="d-flex align-center justify-center">
                        <MudRadio Color="Color.Primary" Value="Position.Left" LabelPlacement="Placement.Left" Dense>L</MudRadio>
                    </MudItem>

                    <!-- Center Badge -->
                    <MudItem xs="4" Class="d-flex align-center justify-center">
                        <MudBadge Origin="@_anchorOrigin" Color="Color.Primary" Dot="true" Overlap Elevation="4" BadgeClass="ma-2">
                            <MudPaper Elevation="0" Outlined="true" Class="pa-6">
                                <MudText Align="Align.Center">Heat Map</MudText>
                            </MudPaper>
                        </MudBadge>
                    </MudItem>

                    <!-- Right Radio -->
                    <MudItem xs="4" Class="d-flex align-center justify-center">
                        <MudRadio Color="Color.Primary" Value="Position.Right" Dense>R</MudRadio>
                    </MudItem>
                </MudGrid>
            </MudItem>

            <!-- Bottom Radio -->
            <MudItem xs="12" Class="d-flex justify-center align-center">
                <MudRadio Color="Color.Primary" Value="Position.Bottom" LabelPlacement="Placement.Bottom" Dense>Bottom</MudRadio>
            </MudItem>

        </MudRadioGroup>
    </MudItem>
    <MudItem xs="10">
        <MudChart T="double" ChartType="ChartType.HeatMap" ChartSeries="@_series" Height="400px" Width="100%"
                  ChartLabels="@_xAxisLabels" ChartOptions="@_options" LegendPosition="_showLegendPosition">
            <MudHeatMapCell Row="0" Column="0">
                <!-- Font Icons act differently and should resize dynamically without specifying width/height -->
                <MudIcon Icon="material-symbols-outlined/database" Color="Color.Primary" />
            </MudHeatMapCell>
            <MudHeatMapCell Row="1" Column="0" Value="72.192304983">
                <!-- text tag doesn't need resized so no width/height -->
                <text dominant-baseline="middle" text-anchor="middle" fill="black" font-family="Helvetica" font-size="14">N/A</text>
            </MudHeatMapCell>
            <MudHeatMapCell Row="2" Column="0" Width="24" Height="24">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <!-- Face Circle -->
                    <circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#FFD700" />
                    <!-- Left Eye -->
                    <circle cx="8" cy="9" r="1.5" fill="black" />
                    <!-- Right Eye -->
                    <circle cx="16" cy="9" r="1.5" fill="black" />
                    <!-- Smile -->
                    <path d="M7,14 Q12,17 17,14" stroke="black" stroke-width="1" fill="none" />
                </svg>
            </MudHeatMapCell>
            <MudHeatMapCell Row="3" Column="0" Width="24" Height="24">
                <MudIcon Icon="@Icons.Material.Filled.Face" Color="Color.Secondary" />
            </MudHeatMapCell>
            <MudHeatMapCell Row="4" Column="0" Value="33.912384" />
            <MudHeatMapCell Row="5" Column="0">
                NO
            </MudHeatMapCell>
            <MudHeatMapCell Row="6" Column="0" MudColor="@(new Utilities.MudColor("#FF5733"))" />
        </MudChart>
    </MudItem>
</MudGrid>
<MudGrid Spacing="2" Class="d-flex">
    <MudItem xs="2" Class="d-flex align-center">
        <MudButton OnClick="@RandomizeData" Variant="Variant.Filled">Randomize Data</MudButton>
    </MudItem>
    <MudItem xs="2" Class="d-flex align-center">
        <MudCheckBox T="bool" @bind-Value="_enableGradient" @bind-Value:after="BuildOptions" Color="Color.Primary">
            Smooth Gradient
        </MudCheckBox>
    </MudItem>
    <MudItem xs="2" Class="d-flex align-center justify-left">
        <MudSelect T="YAxisLabelPosition" @bind-Value="@_yAxisLabelPosition" @bind-Value:after="BuildOptions" FullWidth="true" Label="YAxis Labels">
            <MudSelectItem Value="YAxisLabelPosition.Left">Left</MudSelectItem>
            <MudSelectItem Value="YAxisLabelPosition.Right">Right</MudSelectItem>
            <MudSelectItem Value="YAxisLabelPosition.None">None</MudSelectItem>
        </MudSelect>
    </MudItem>
    <MudItem xs="2" Class="d-flex align-center justify-left">
        <MudSelect T="XAxisLabelPosition" @bind-Value="@_xAxisLabelPosition" @bind-Value:after="BuildOptions" FullWidth="true" Label="XAxis Labels">
            <MudSelectItem Value="XAxisLabelPosition.Top">Top</MudSelectItem>
            <MudSelectItem Value="XAxisLabelPosition.Bottom">Bottom</MudSelectItem>
            <MudSelectItem Value="XAxisLabelPosition.None">None</MudSelectItem>
        </MudSelect>
    </MudItem>
    <MudItem xs="2" Class="d-flex align-center">
        <MudNumericField Label="Number of Colors Used" @bind-Value="_colorCount" @bind-Value:after="BuildOptions" Min="1" Max="5" Step="1" />
    </MudItem>
    <MudItem xs="2"></MudItem>
    <MudItem xs="2" Class="d-flex align-center">
        <MudCheckBox T="bool" @bind-Value="@_legendVisible" @bind-Value:after="BuildOptions" Color="Color.Primary">
            Show Legend
        </MudCheckBox>
    </MudItem>
    <MudItem xs="3" Class="d-flex align-center">
        <MudCheckBox T="bool" @bind-Value="@_showLegendValues" @bind-Value:after="BuildOptions" Color="Color.Primary">
            Show Legend Values
        </MudCheckBox>
    </MudItem>
    <MudItem xs="2" Class="d-flex align-center">
        <MudCheckBox T="bool" @bind-Value="@_showValueLabels" @bind-Value:after="BuildOptions" Color="Color.Primary">
            Show Values
        </MudCheckBox>
    </MudItem>
    <MudItem xs="3" Class="d-flex align-center">
        <MudCheckBox T="bool" @bind-Value="@_showValueToolTips" @bind-Value:after="BuildOptions" Color="Color.Primary">
            Show Value Tooltips
        </MudCheckBox>
    </MudItem>
</MudGrid>

@code {
    private HeatMapChartOptions _options = new();
    private List<ChartSeries<double>> _series = [];
    private XAxisLabelPosition _xAxisLabelPosition = XAxisLabelPosition.Bottom;
    private YAxisLabelPosition _yAxisLabelPosition = YAxisLabelPosition.Left;
    private bool _enableGradient = false;
    private bool _showValueLabels = true;
    private bool _showLegendValues = true;
    private bool _showValueToolTips = true;
    private bool _legendVisible = true;
    private Position _showLegendPosition = Position.Bottom;
    private Origin _anchorOrigin = Origin.BottomCenter;
    private int _colorCount = 5;
    private readonly string[] _colors = ["#5AC8FA", "#34C759", "#007AFF", "#FFCC00", "#e03131"];
    private readonly List<ChartSeries<double>> _heatMapSeries =
        [
        new() { Name = "Mo", Data = new([90, 79, 72, 69, 62, 62, 55, 65, 70]) },
        new() { Name = "Te", Data = new([35, 41, 35, 51, 49, 62, 69, 91, 148]) },
        new() { Name = "We", Data = new([22, 90, 62, 32, 05, 42, 63, 43, 155]) },
        new() { Name = "Th", Data = new([35, 41, 35, 51, 49, 62, 69, 91, 148]) },
        new() { Name = "Fr", Data = new([22, 90, 62, 32, 05, 42, 63, 43, 155]) },
        new() { Name = "Sa", Data = new([35, 41, 35, 51, 49, 62, 69, 91, 148]) },
        new() { Name = "Su", Data = new([22, 90, 62, 32, 05, 42, 63, 43, 155]) }
    ];
    private string[] _xAxisLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];

    protected override void OnInitialized()
    {
        base.OnInitialized();
        _series = _heatMapSeries;
        BuildOptions();
    }

    private void ShowLegendPositionChanged(Position value)
    {
        _showLegendPosition = value;
        _anchorOrigin = value switch
        {
            Position.Top => Origin.TopCenter,
            Position.Left => Origin.CenterLeft,
            Position.Right => Origin.CenterRight,
            Position.Bottom => Origin.BottomCenter,
            _ => _anchorOrigin
        };
        BuildOptions();
    }

    private void BuildOptions()
    {
        _options = new HeatMapChartOptions
        {
            XAxisLabelPosition = _xAxisLabelPosition,
            YAxisLabelPosition = _yAxisLabelPosition,
            EnableSmoothGradient = _enableGradient,
            ChartPalette = _colors.Take(_colorCount).ToArray(),
            ShowLabels = _showValueLabels,
            ShowLegend = _legendVisible,
            ShowLegendLabels = _showLegendValues,
            ShowToolTips = _showValueToolTips,
        };
        StateHasChanged();
    }

    private void RandomizeData()
    {
        var newSeries = new List<ChartSeries<double>>();
        string[] days = ["Mo", "Te", "We", "Th", "Fr", "Sa", "Su"];
        const int DataPoints = 9;

        foreach (var day in days)
        {
            var data = new double[DataPoints];
            for (int i = 0; i < DataPoints; i++)
            {
                data[i] = Random.Shared.NextDouble() * 100;
            }
            newSeries.Add(new() { Name = day, Data = data });
        }

        _series = newSeries;
    }
}
